<template>
  <div style="width: 96%;padding: 0  2%;position: relative;">
    <Header :xiao="xiao" :title="title" :shezhi="shezhi" style="margin-top: 5px;" @goback="$router.push('/')"
      @install="install" />
    <p class="p"><input type="text" placeholder="说一句话吧"></p>
    <div class="anniu"><span>井</span>请选择分类</div>
    <div class="anniu"><span>井</span>请选择分类</div>
    <div class="bottom">
      <p>
        <i class="iconfont">&#xe745;</i>
        <span @click="$router.push('/topicnav')">井</span>
        <i class="iconfont" @click="openImg">&#xe62c;</i>
        <button class="btn">发送</button>
      </p>
    </div>
    <div class="ipt">
      <!-- accept="image/*": accept表示可以上传文件类型，image表示图片，*表示所有支持的格式 -->
      <input v-show="false" type="file" accept="image/*" @change="img($event)" ref="input">
      <p class="pp" v-show="imgUrl">点击可预览选好的图片<span>1/9</span></p>
      <div class="img">
        <i class="iconfont shan" v-show="imgUrl" @click="shan">&#xe718;</i>
        <img v-show="imgUrl" :src="imgUrl" id="preview" />
        <div class="twoimg" v-show="imgUrl" @click="openImg">+</div>
      </div>
    </div>
    <Install :zzcval="zzcval" :buttomval="buttomval" @no="no" @toaddinput="toaddinput" />
    <Del :superstratum="superstratum" :title="title" @queren="queren" @conse="conse"/>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue';
import Install from '@/components/common/Install.vue';
import Del from '@/components/common/Del.vue';
export default {
  components: { Header, Install,Del },
  data() {
    return {
      // 控制返回按钮显示隐藏
      xiao: true,
      // 控制设置按钮显示隐藏
      shezhi: true,
      buttomval: false,
      zzcval: false,
      title: '所有人可见',
      imgUrl: '',
      superstratum:false,
      title:''
    }
  },
  methods: {
    // 点击设置显示
    install() {
      this.buttomval = true
      this.zzcval = true
    },
    // 关闭设置隐藏
    no() {
      this.zzcval = false
      this.buttomval = false
    },
    // 选中设置
    toaddinput(val) {
      this.title = val
      this.zzcval = false
      this.buttomval = false
    },
    // 上传图片
    img(e) {
      // console.log(e);
      // this.userinfo.avatarurl = e.target.files[0]
      // console.log(e.target.files[0])
      // 创建一个异步文件读取机制
      let reader = new FileReader();
      console.log(reader)
      // 将上传图片的files格式转为Data URL格式
      reader.readAsDataURL(e.target.files[0])
      // 成功时触发
      reader.onload = () => {
        this.imgUrl = reader.result
        // localStorage.setItem('imgUrl', this.imgUrl)
      };
    },
    openImg() {
      // 点击当前的触发$ref的input的点击事件
      this.$refs.input.click()
    },
    shan(){
      this.superstratum=true
      this.title='删除该图片'
    },
    queren(){
      this.imgUrl = ''
      this.superstratum = false
    },
    conse(){
      this.superstratum = false
    }

    }
}
</script>

<style lang="scss" scoped>
.p {
  color: grey;
  font-size: 16px;
  padding-top: 10px;
  height: 150px;

  input {
    border: 0;
    outline: none;
  }
}

.anniu {
  display: flex;
  width: 100px;
  padding: 5px 10px 5px 20px;
  border: 1px solid #ccc;
  border-radius: 25px;
  font-size: 14px;
  text-align: center;
  align-items: center;
  margin-bottom: 10px;

  span {
    font-size: 16px;
    margin-right: 5px;
    margin-top: 1px;
  }
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 1%;

  p {

    i,
    span {
      font-size: 26px;
      margin-right: 20px;
    }

    .btn {
      float: right;
      margin-right: 20px;
      background-color: #FF4A6A !important;
      width: 70px;
      height: 30px;
      border: 0;
      border-radius: 5px;
      color: #fff;
    }
  }
}

.ipt {
  width: 100%;
  height: 100px;

  .pp {
    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;

    span {
      float: right;
      color: #B2B2B2;
    }
  }

  .img {
    width: 105px;
    height: 105px;
    margin-left: 5px;
    position: relative;

    .shan {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 100;
      width: 30px;
      height: 30px;
      text-align: center;
      color: #fff;
      line-height: 30px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .twoimg {
      width: 105px;
      height: 105px;
      border: 1px solid #D9D9D9;
      position: absolute;
      right: 0;
      top: 0;
      margin-right: -120px;
      font-size: 80px;
      color: #D9D9D9;
      font-weight: 50;
      line-height: 90px;
      text-align: center;
    }

    img {
      width: 105px;
      height: 105px;
      background-color: #f7f8fa
    }
  }
}
</style>